<template>
<div style="padding: 10px">

  <div style="margin: 10px 0">
    <el-input v-model="page.param.pub_name" placeholder="请输入资源名" style="width: 20%" clearable></el-input>
    <el-button type="primary" style="margin-left: 5px" @click="load">搜索</el-button>
    <el-button type="info" style="margin-left: 5px" @click="reset">重置</el-button>
    <el-upload :action="'http://150.158.87.29:9090/resource/upload'" :show-file-list="false"
               :on-success="handleFileUploadSuccess" style="display: inline-block; margin-left: 5px">
      <el-button type="warning" style="padding-right:10px">上传</el-button>
    </el-upload>
  </div>

  <div style="margin: 0 0 10px">
    <el-row>
      <el-col :span="4" v-for="(item) in state.tableData" :key="item.pubId">
        <el-card shadow="hover" style="width:170px; height: 210px; margin-top: 20px" >
          <img src="http://rxs18bfmd.hd-bkt.clouddn.com/wenjian.png"  alt="image" style="height: 120px"><br>
          <h5 class="time" :title="item.pubName">{{item.pubName}}</h5>
          <el-row>
            <el-button type="text" class="button" @click="del(item.pubId)">删除</el-button>
            <el-button type="text" class="button" @click="downloadFile(item.pubId)">下载</el-button>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
  </div>

  <div style="padding: 10px">
    <el-pagination
        background
        v-model:current-page="page.pageNum"
        v-model:page-size="page.pageSize"
        :page-sizes="[5, 10, 15]"
        large
        :disabled="false"
        layout="total, sizes, prev, pager, next, jumper"
        :total="state.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </div>

</div>
</template>

<script setup>
import {reactive, ref} from "vue";
import request from "@/request";
import {ElMessage, ElNotification} from "element-plus";


const load = () => {
  request.post('/resource/listPage',JSON.stringify(page)).then(res=>{
    console.log(res.data)
    if(res.code===200) {
      console.log(res)
      state.tableData = res.data
      state.total=res.total
    }
  })
}

const page=reactive({
  pageNum:ref(1),
  pageSize:ref(10),
  param:{
    pub_name:ref()
  }
})
//刷新页面
load()
//页数
const handleSizeChange=(val)=>{
  page.pageSize=val
  load()
}
//每页数量
const handleCurrentChange=(val)=>{
  page.pageNum=val
  load()
}

const reset=()=>{
  page.param.pub_name="";
  load()
}

const handleFileUploadSuccess=(res)=>{
  console.log(res)
  // this.$message.success("上传成功")
  load()
}
const state = reactive({
  tableData: [],
  total:0,
  form:{},
})

const downloadFile = (pubId) =>{
  request.get('/resource/getUrl',{params:{pub_id:pubId}}).then(res=>{
    if(res.code===200){
      window.open(res.data)
      setTimeout(() => {
        // 方法区
        load()
      }, 300)
    }
  })
}

const del = (pubId) => {
  request.get('/resource/del',{params:{pub_id:pubId}}).then(res=>{
    if(res.code===200){
      ElNotification({
        type:"success",
        message:"删除成功"
      })
      load()
    }
  })
}

</script>

<style>
  .img{
    width: 100%;
    height:50%;
    display: flex;
    /*display: block;*/
  }
  .time {
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    color: #999;
    /*text-align: center;*/
  }
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .button{
    text-align: center;
  }

</style>